<template>
  <div class="content bg-white">
    <dc-header :title="'修改密码'" :page-to="'/account'"
               :action-title="'保存'"
               @submit="submitform">
    </dc-header>

    <div class="head-top mt20">
      <div class="pl50 pr50 pt68">
        <inputItem placeholder="输入旧密码" type="password"
                   class="mt30"
                   iconName="icon-person-old"
                   v-model="oldPassword"
                   :maxLength = "20"
                   v-validate="{ rules: { required: true } }"
                   name="密码"
        />
        <inputItem placeholder="输入新密码,6-20位数字和字母组合" type="password"
                   class="mt30"
                   iconName="icon-login-password"
                   v-model="password"
                   :maxLength = "20"
                   v-validate="{ rules: { required: true, password: true} }"
                   name="新密码"
        />
        <inputItem placeholder="确认新密码,6-20位数字和字母组合" type="password"
                   class="mt30"
                   iconName="icon-login-password"
                   v-model="confirmpassword"
                   :maxLength = "20"
                   v-validate="{ rules: { required: true } }"
                   name="新密码"
        />
        <p class="mt20 text-left">
          注:密码必须是6-20位数字和字母的组合
        </p>
      </div>
    </div>
  </div>
</template>
<script>
  import header from '@/common/plugins/header';
  import cell from '@/common/plugins/cell';
  import inputItem from '@/common/plugins/input/inputItem';
  import api from '@/common/api/personal';
  import mintUi from '@/common/mintUi';
  /**
   * @namespace  components/personal/password
   * @author ashen
   */
  export default {
    components: {
      'dc-header': header,
      'dc-cell': cell,
      'inputItem': inputItem
    },
    data () {
      return {
        oldPassword: '',
        password: '',
        confirmpassword: ''
      };
    },
    methods: {
      submitform () {
        this.$validator.validateAll().then((result) => {
          if (result) {
            if (this.password !== this.confirmpassword) {
              mintUi.openToast('新密码不一致!');
              return false;
            }
            api.editPassword({
              password: this.password,
              oldPassword: this.oldPassword
            }).then(() => {
              mintUi.openToast('密码修改成功!');
              this.$router.push('/account');
            });
          } else {
            mintUi.openToast(this.errors.items[0].msg);
          }
        });
      }
    }
  };
</script>
<style lang="scss" scoped>
</style>
